<script setup>
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMenu, ElMenuItem, ElSubMenu, ElTabs, ElTabPane } from 'element-plus';

const router = useRouter();
const route = useRoute();

// 菜单数据
const menuItems = ref([
  { index: '1', name: '首页', route: '/' },
  { index: '2', name: '关于', route: '/about' },
  {
    index: '3',
    name: '服务',
    children: [
      { index: '3-1', name: '服务A', route: '/services/a' },
      { index: '3-2', name: '服务B', route: '/services/b' },
    ],
  }
]);

// 当前选中的菜单项
const activeIndex = ref('1');

// 打开的标签页
const tabs = ref([
  { name: '首页', route: '/' }
]);

// 当前激活的标签页
const activeTab = ref('/');

// 处理菜单选择
const handleSelect = (key, keyPath) => {
  const selectedItem = findMenuItem(menuItems.value, key);
  if (selectedItem && selectedItem.route) {
    addTab(selectedItem);
    router.push(selectedItem.route);
  }
};

// 添加标签页
const addTab = (item) => {
  const existingTab = tabs.value.find(tab => tab.route === item.route);
  if (!existingTab) {
    tabs.value.push({ name: item.name, route: item.route });
  }
  activeTab.value = item.route;
};

// 关闭标签页
const removeTab = (targetName) => {
  const targetIndex = tabs.value.findIndex(tab => tab.route === targetName);
  if (targetIndex !== -1) {
    tabs.value.splice(targetIndex, 1);
    if (activeTab.value === targetName) {
      // 如果关闭的是当前激活的标签，则激活前一个标签
      const nextTab = tabs.value[targetIndex] || tabs.value[targetIndex - 1];
      if (nextTab) {
        activeTab.value = nextTab.route;
        router.push(nextTab.route);
      }
    }
  }
};

// 递归查找菜单项
const findMenuItem = (items, key) => {
  for (const item of items) {
    if (item.index === key) return item;
    if (item.children) {
      const found = findMenuItem(item.children, key);
      if (found) return found;
    }
  }
  return null;
};

// 监听路由变化，更新激活的标签
watch(() => route.path, (newPath) => {
  activeTab.value = newPath;
  const currentRoute = menuItems.value.find(item => item.route === newPath) ||
                       menuItems.value.flatMap(item => item.children || []).find(child => child.route === newPath);
  if (currentRoute) {
    addTab(currentRoute);
  }
});
</script>

<template>
  <div class="app-container">
    <!-- 左侧菜单 -->
    <aside class="sidebar">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-vertical-demo"
        @select="handleSelect"
      >
        <template v-for="item in menuItems" :key="item.index">
          <el-sub-menu v-if="item.children" :index="item.index">
            <template #title>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item v-for="child in item.children" :key="child.index" :index="child.index">
              {{ child.name }}
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item v-else :index="item.index">
            <span>{{ item.name }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </aside>

    <!-- 右侧内容区 -->
    <main class="main-content">
      <!-- 页面标签 -->
      <el-tabs v-model="activeTab" type="card" closable @tab-remove="removeTab" @tab-click="(tab) => router.push(tab.props.name)">
        <el-tab-pane
          v-for="item in tabs"
          :key="item.route"
          :label="item.name"
          :name="item.route"
        >
        </el-tab-pane>
      </el-tabs>

      <!-- 页面内容 -->
      <div class="page-content">
        <router-view></router-view>
      </div>
    </main>
  </div>
</template>

<style scoped>
.app-container {
  display: flex;
  height: 100vh;
  width: 100%;
}

.sidebar {
  width: 200px;
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid #e6e6e6;
}

.main-content {
  flex:1;
  display: flex;
  width:100%;
  flex-direction: column;
}

.page-content {
  flex-grow: 1;
  padding: 20px;
  overflow-y: auto;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
